<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>  
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
		<title>${channelName }——火眼TV 新视界 新感觉</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/front_first/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/front_first/css/public.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/front_first/css/font-awesome.css" />
	</head>
	<body class="body-bg">
		<div class="header">
			<div class="header-bd">
				<!-- 导航部分 -->
				<div class="nav">
					<span class="fa fa-bars" aria-hidden="true"></span>
					导航
					<span class="fa fa-caret-down" aria-hidden="true"></span>
				</div>
				<div class="nav-list">
					 <c:forEach items="${hearderMap}" var="map" varStatus="s">
						<div>
							<label>${map.key }</label>
							<c:forEach items="${map.value}" var="list" varStatus="i">
								<a href="${pageContext.request.contextPath }/public/search.html?type=${list.code}" >${list.name}</a>
							</c:forEach>
						</div>
					 </c:forEach> 
				</div>
				<!-- logo -->
				<div class="logo">
					<a href="${pageContext.request.contextPath }/common/show.html">
						<img src="${pageContext.request.contextPath }/resources/front_first/img/logo.png" alt="" />
					</a>
				</div>
				<!-- 搜索 -->
				<div class="search">
					<!-- 搜索框 -->
					<div class="top">
						<div class="input-search">
							<input type="text" name="name" id="search-input" />
							<a href="javascript:searchBSeries();" class="fa fa-search" aria-hidden="true"></a>
						</div>
					</div>
					<!-- 搜索关键词 -->
					<ul>
						<c:forEach items="${keyWords}" var="item" varStatus="s">
							<li>
								<a href="javascript:void(0);" onclick="searchKeywords(this);">${item }</a>
							</li>
						</c:forEach>
					</ul>
				</div>				
			</div>
			<div class="syd">
				<div class="sy-dh">
					<ul>
						<li><a href="${pageContext.request.contextPath }/common/show.html">首页</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=TVPLAY">电视剧</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=MOVIE">电影</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=VARITY">综艺</a></li>
						<li><a href="${pageContext.request.contextPath }/deputy/deputyindex.html?channel=CARTOON">动漫</a></li>
						<li><a href="${pageContext.request.contextPath }/info/infoindex.html">资讯</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<!--banner-->
		<div class="sy-banner">
			<div class="banner-pic">
				<!-- banner上的悬浮条，暂时是静态的后期如果修改请注意修改备注 -->
				<div class="dsj-dh">
					<a href="${pageContext.request.contextPath }/public/search.html?area=AREA_DALU&type=${channel}">内地</a>
					<a href="${pageContext.request.contextPath }/public/search.html?area=AREA_RIHAN&type=${channel}">日韩</a>
					<a href="${pageContext.request.contextPath }/public/search.html?area=AREA_OUMEI&type=${channel}">欧美</a>
					<a href="${pageContext.request.contextPath }/public/search.html?type=${channel}">全部剧集</a>
					<a href="${pageContext.request.contextPath}/common/redirect?id=8549&source=youku">推荐的热剧<span><img src="${pageContext.request.contextPath }/resources/front_first/img/hot.jpg" alt="" /></span></a>
				</div>
				<!-- 轮播图部分 -->
				<div id="container">
				    <div id="list" style="left: -1200px;">
				     	<span>
				        	<img src="" alt=""/>       	
				        </span>
				        <c:forEach items="${bannerList }" var="item" varStatus="s">
				        	<span>
					        	<img src="${baseImgPath }${item.imgUrl }" alt=""/>
					        	<div class="juji">
					        		<div class="jishu">
					        			<p>更新至</p>
					        			<span>${item.setSum }</span>
					        			<span>集</span>
					        		</div>
					        		<div class="jj-detail">
					        			${item.summary }
					        		</div>
					        	</div>
					        </span>
				        </c:forEach>
				       <span>
				        	<img src="" alt=""/>
				        </span> 
				    </div>
				    <div id="buttons">
				    	<c:forEach items="${bannerList }" var="item" varStatus="s">
				    	<span index="${s.index+1}" <c:if test="${s.index == 0 }">class="on"</c:if> ></span>
				    </c:forEach>
				       <!--  <span index="1" class="on"></span>
				        <span index="2"></span>
				        <span index="3"></span>
				        <span index="4"></span>
				        <span index="5"></span> -->
				    </div>
				    <a href="#" id="prev" class="arrow"><img src="${pageContext.request.contextPath }/resources/front_first/img/zuo.png" alt="" /></a>
				    <a href="#" id="next" class="arrow"><img src="${pageContext.request.contextPath }/resources/front_first/img/you.png" alt="" /></a>
				</div>
			</div>			
		</div>
		
		<div class="dsj-xz">
			<div class="bd">
				<div class="list">
					<span>按排序</span>
					<ul class="sort-chos">
						<li code="like_count" onclick="searchSort(this)">人气最旺</li>
						<li code="create_time" onclick="searchSort(this)">最新发布</li>
					</ul>
				</div>
				<div class="list">
					<span>按地区</span>
					<ul>
						<c:forEach items="${dictionaryAreaList }" var="item" >
							<li onclick="searchArea(this)">${item.name }
								<span style="display:none;">${item.code }</span>
							</li>
						</c:forEach>
					</ul>
				</div>
				<div class="list">
					<span>按类型</span>
					<ul class="type-code" >
						<c:forEach items="${dictionaryTypeList }" var="item" >
							<li onclick="searchType(this);">${item.name }
								<span style="display:none;">${item.code }</span>
							</li>
						</c:forEach>
					</ul>
				</div>
				<div class="list" id="stars">
					<span>按明星</span>
					<ul>
						<c:forEach items="${dictionaryStarList }" var="item" >
							<li onclick="searchStar(this)">${item.name }</li>
						</c:forEach>
					</ul>
				</div>
			</div>
		</div>
		<div class="ly-detail">
			<!-- 卫视同步部分 -->
		    <div class="sy-bdleft">
				<p class="big-style">${name }</p>
			    <ul class="sy-stylebig">
			    	<c:forEach items="${seriesList1 }" var="item">
			    		<a href="${pageContext.request.contextPath}/common/redirect?id=${item.id }&source=${item.source}" target="_blank">
			    		<li>
				    		<img src="${baseImgPath }${item.poster }" alt="" />
					    	<p class="first-tilte">${item.name }</p>
					    	<p class="first-word">${item.description }</p>
				    	</li>
			    	</a>
			    	</c:forEach>
			    	<c:forEach items="${seriesList2 }" var="item">
			    		<a href="${pageContext.request.contextPath}/common/redirect?id=${item.id }&source=${item.source}" target="_blank">
			    		<li>
				    		<img src="${baseImgPath }${item.poster }" alt="" />
					    	<p class="first-tilte">${item.name }</p>
					    	<p class="first-word">${item.description }</p>
				    	</li>
			    	</a>
			    	</c:forEach>
			    				    	
			    </ul>
			</div>
			<div class="sy-bdright">
			<!-- 热剧风云榜部分 -->
				<p class="big-style">热播${channelName }榜</p>
				<div class="bttx st-one">
					<ul>
						<c:forEach items="${bSeriesListHot }" var="item" varStatus="s">
							<a title="${item.name }" href="${pageContext.request.contextPath}/common/redirect?id=${item.id }&source=${item.source}" target="_blank">
				    			<li class="">
						    		<span class="img-bc display-none">
						    			<img src="${baseImgPath }${item.poster }" alt="" />
						    			<div class="zzc"></div>
						    		</span>
						    		<span class="num number">${s.index+1}</span>
						    		<span class="mcc word"><c:if test="${fn:length(item.name) >6 }"><c:out value="${fn:substring(item.name, 0,6)}.."></c:out></c:if>
						    			<c:if test="${fn:length(item.name) <=6 }">${item.name }</c:if></span>
						    		<span class="sjj jt">
						    		<c:if test="${item.playCount/10000>1 }">
									<fmt:formatNumber type="number" value="${item.playCount/10000}" pattern="0.0" maxFractionDigits="1"/>
						    		<span>w</span>
						    		</c:if>
						    		<c:if test="${item.playCount/10000<1 }">
									<fmt:formatNumber type="number" value="${item.playCount/1000}" pattern="0.0" maxFractionDigits="1"/>
						    		<span>k</span>
						    		</c:if>
						    		</span>
						    	</li>
				    		</a>
						</c:forEach>
				   </ul>				    
				</div>
			</div>
			<!-- 精彩花絮 -->
			<c:if test="${webVideoList.size()>0 }">
			<div class="enjoy">
				<p class="big-style">精彩花絮</p>
				<ul class="sy-all">
					<c:forEach items="${webVideoList}" var="item" varStatus="s">
						<a title="${item.title }" href="${item.detailUrl }" target="_blank">
						<li>
							<img src="${baseImgPath }${ item.localCoverUrl}" alt="" />
						    <p class="first-tilte">
							    <c:if test="${fn:length(item.title) >10 }">
							  		<c:out value="${fn:substring(item.title, 0,10)}.."></c:out>
							  	</c:if>
							  	<c:if test="${fn:length(item.title) <=10 }">${item.title }</c:if>
						  	</p>
						    <p class="first-word">
							    <c:if test="${fn:length(item.introduction)<12 }">${item.introduction }</c:if>
						    	<c:if test="${fn:length(item.introduction)>11 }">
						    		<c:out value="${fn:substring(item.introduction, 0,11)}.."></c:out>
						    	</c:if>
							</p>
						</li>
					</a>
					</c:forEach>
				</ul>
			</div>
			</c:if>
			<div class="advier" id="${bannerOne.code }" size="${bannerOne.size }" name="${bannerOne.name }" interval="${bannerOne.adInterval }">
				
			</div>
			<div class="enjoy">
				<c:forEach items="${kindSeriesMap }" var="map" varStatus="s">
					<c:if test="${map.value.size()>0 }">
						<p class="big-style">${map.key }</p>
						<ul class="dsj-long">
							<c:forEach items="${map.value }" var="item" varStatus="i">
								<a href="${pageContext.request.contextPath}/common/redirect?id=${item.id }&source=${item.source}" title="${item.name }" target="_blank">
					    		<li>
						    		<div><img src="${baseImgPath }${item.cover }" alt="${item.name }" /></div>
							    	<p class="first-tilte"><c:if test="${fn:length(item.name) >7 }"><c:out value="${fn:substring(item.name, 0,7)}.."></c:out></c:if>
						    			<c:if test="${fn:length(item.name) <=7 }">${item.name }</c:if><span>${item.score }</span></p>
							    	<p class="first-word">${item.description }</p>
							    	<span class="video_source" style="display:none">${item.source }</span>
						    		<c:if test="${channel eq 'MOVIE' }">
						    		</c:if>
						    		<c:if test="${channel eq 'TVPLAY' }">
						    			<span>
							    			<c:if test="${item.updatedSetSum==item.setSum }">
								    			全<span>${item.updatedSetSum }</span>集
								    		</c:if>
								    		<c:if test="${item.updatedSetSum!=item.setSum }">
								    			更新至<span>${item.updatedSetSum }</span>集
								    		</c:if>
								    	</span>
						    		</c:if>
						    		<c:if test="${channel eq 'CARTOON' }">
						    			<span>
							    			<c:if test="${item.updatedSetSum!=null}">
								    			更新至<span>${item.updatedSetSum }</span>集
								    		</c:if>
								    	</span>
						    		</c:if>
							    	</span>
						    	</li>
					    	</a>
							</c:forEach>
					    </ul>
			  	  </c:if>
				</c:forEach>
			
			  
			</div>
			<div class="enjoy">
		    	<p class="big-style">合作站点</p>
		    	<ul class="hz">
		    		<c:forEach items="${partnerList }" var="item" varStatus="s">
		    			<li>
		    				<a href="${item.linkUrl }" target="_blank"><img src="${baseImgPath }${item.imgUrl }" alt="" /></a>
		    			</li>
		    		</c:forEach>
		    		<!-- <li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li>
		    		<li><img src="img/2.jpg" alt="" /></li> -->
		    	</ul>
		    </div>
		</div>
		<div class="n-footer">
			<p>火眼影视通过链接的方式提供相关内容。所有内容均为第三方内容提供方提供。如涉及版权问题，请及时告知我们。</p>
			<ul>
				<li><a href="#">关于火眼</a></li>
				<li><a href="#">反馈建议</a></li>
				<li><a href="#">版权声明</a></li>
				<li><a href="#">加入收藏</a></li>
				<li><a href="#">联系我们</a></li>
			</ul>
			<p>Copyright © huoyan All Rights Reserved.</p>
			<p>沪ICP证B2-20090064号</p>
		</div>
	</body>
	<script type="text/javascript" src="${pageContext.request.contextPath }/resources/front_first/js/jquery-2.2.3.min.js" ></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/resources/front_first/js/huoyan-dsj-lb.js" ></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/resources/front_first/js/public.js" ></script>
	<script type="text/javascript">
		$('.list').each(function(){
			$(this).find('ul li').click(function(){
				$(this).addClass('chose').siblings().removeClass('chose')
			})
		})
		
		$(document).ready(function(){
		  $(".bttx.st-one ul li").eq(0).addClass("li-hover");
		  $(".bttx.st-one ul li .img-bc").eq(0).removeClass("display-none");
		  var $channelName = "${channelName}";
			for(var i=0;i<$(".syd .sy-dh li").size();i++){
				var txt = $(".syd .sy-dh li").eq(i).text();
				if(txt == $channelName){
					$(".lia").removeClass("lia");
					$(".syd .sy-dh li").eq(i).addClass("lia");
				}
			}
		});
		
		$(".syd .sy-dh li").click(function(){
			$(".lia").removeClass("lia");
			$(this).addClass("lia");
			window.location.href=$(this).find("a").attr("href");
		});
	</script>
	<script type="text/javascript">
		var baseImgPath = "${baseImgPath}";
		//搜索栏
		function searchBSeries(){
			window.location.href="${pageContext.request.contextPath }/public/search.html?name="+$("#search-input").val()+"&type=${channel}";
			$("#search-input").val("");
		}
		function searchKeywords(obj){
			var key=$(obj).text();
			var sort = $(".sort-chos .chose").attr("code");
			window.location.href="${pageContext.request.contextPath }/public/search.html?name="+key+"&type=${channel}";
		}
		function searchType(obj){
			var key=$(obj).find("span").text();
			window.location.href="${pageContext.request.contextPath }/public/search.html?type="+key;
		}
		function searchArea(obj){
			var key=$(obj).find("span").text();
			window.location.href="${pageContext.request.contextPath }/public/search.html?area="+key+"&type=${channel}";
		}
		function searchSort(obj){
			var sort = $(obj).attr("code");
			window.location.href="${pageContext.request.contextPath }/public/search.html?sort="+sort+"&type=${channel}";
		}
		function searchStar(obj){
			var star = $(obj).text();
			window.location.href="${pageContext.request.contextPath }/public/search.html?name="+star+"&type=${channel}";
		}
		function searchSort(obj){
			var sort = $(obj).attr("code");
			window.location.href="${pageContext.request.contextPath }/public/search.html?sort="+sort+"&type=${channel}";
		}
		$(document).ready(function(){
			var t1 = $(".advier").eq(0).attr("id");	
			getAdByPosition(t1);
			//alertText();
		});
		//获取某广告位的所有广告
		function getAdByPosition(data){
			var code = data;
			$.ajax({
				type: "POST",
			     url: "${pageContext.request.contextPath }/ad/getad",
			    data: {positionCode:data} ,
			    dataType: "json",
			    success: function(data){
			    	if(data!=null && data!=''){
			    		var html = buildAd(data);
				    	$("#"+code).eq(0).append(html);
				    	var size = $("#"+code).attr("size").split('*');
				    	var w = size[0];
				    	var h = size[1];
				    	$("#"+code+" img").attr("style","height:"+h+"px;width:"+w+"px");
				    	
			    	}
			    },
			    error:function(){
			    	alert("广告异常！");
			    }
			});
			
		}
		
		//生成对应广告位的条目
		function buildAd(data){
			var json = eval(data);
			var html = "";
			$.each(
					json,
					function(i,item)
					{
						if(i==0){
							html+="<a hrefs="+item.linkUrl+ " onclick='clickAdInsert(this)' id="
							+item.id+" title="+item.title+" type="+item.type+" typeName="+item.typeName+">";
							html+="<img src="+baseImgPath+item.resourceUrl+" alt='' >";
							html+="</img></a>";
						}else{
							html+="<a hrefs=" +item.linkUrl+" style='display:none' onclick='clickAdInsert(this)' id="
							+item.id+" title="+item.title+" type="+item.type+" typeName="+item.typeName+">";
							html+="<img src="+baseImgPath+item.resourceUrl+" alt='' >";
							html+="</img></a>";
						}
					
					}
			);
			return html;
			
		}
		/* $('.advier').on('click','a:not([style])',function(){
			 alert(1);
			}); */
		
			//alert(inter);
		/* function alertText(){
			var $html = $(".advier a:not([style])").attr("type");
			
			alert($html);
		} */
		
		//切换浏览广告
		function changeAdInsert(obj){
			$.get("http://ipinfo.io/json",function(data){
				var ipCode="";
				var json=eval(data);
				var ipCode = json.ip;
				var $this=$(obj);
				//点击的是a标签
	        	var params={};
	        	params["adpositionCode"]=$this.parent().attr("id");
	        	params["adpositionName"]=$this.parent().attr("name");
	        	params["adResourceId"]=$this.attr("id");
	        	params["adResourceTitle"]=$this.attr("title");
	        	params["adTypeName"]=$this.attr("typeName");
	        	params["adTypeCode"]=$this.attr("type");
	        	params["ip"]=ipCode;
	        	params["type"]="d";
	        	params["count"]="1";
	        	$.ajax({
	    			type:"POST",
	    			data:params,
	    			url:"${pageContext.request.contextPath }/common/addAdRecord.html",
	    			success:function(){
	    				alert("success");
	    			},
	    			error:function(){
	    				alert("error");
	    			}
	    		}); 
	        	
			});
		}
		//点击插入广告
		function clickAdInsert(obj){
			$.get("http://ipinfo.io/json",function(data){
				var ipCode="";
				var json=eval(data);
				var ipCode = json.ip;
				var $this=$(obj);
				//点击的是a标签
	        	var params={};
	        	params["adpositionCode"]=$this.parent().attr("id");
	        	params["adpositionName"]=$this.parent().attr("name");
	        	params["adResourceId"]=$this.attr("id");
	        	params["adResourceTitle"]=$this.attr("title");
	        	params["adTypeName"]=$this.attr("typeName");
	        	params["adTypeCode"]=$this.attr("type");
	        	params["ip"]=ipCode;
	        	params["type"]="d";
	        	params["count"]="1";
	        	$.ajax({
	    			type:"POST",
	    			data:params,
	    			url:"${pageContext.request.contextPath }/common/addAdRecord.html",
	    			success:function(){
	    				window.location.href=$this.attr("hrefs");
	    			},
	    			error:function(){
	    				alert("error");
	    			}
	    		}); 
	        	
			});
		}
	    </script>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/front_first/js/advertisement.js" ></script>
</html>